<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        #d1 {
            height: 1500px;
            background: #777;
        }

        #d2 {
            height: 100px;
            background: #aaa0a0;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            margin-top: 20px;
        }
    </style>
    <div id="d1"></div>
    <div id="d2">加载更多</div>
    <script>
        //获取元素
        var d2 = document.getElementById('d2');
        //创建一个观察者
        var observer = new IntersectionObserver(function (entries) {
            console.log(entries);
            //entries是一个数组,里面存放着所有被观察的元素
            //每个元素都是一个IntersectionObserverEntry对象
            //每个对象都有一个isIntersecting属性,表示元素是否在视口中
            if (entries[0].isIntersecting) {
                alert('加载更多');
            }
        }, {
            // root: null, //默认为视口
            rootMargin: '50px', //默认为0px
            //threshold: 0 // 如果设置 threshold: [0.25, 0.5, 0.75]，那么当目标元素有25%、50%或75%的部分进入视口时，都会触发一次回调通知
        });
        //观察元素
        observer.observe(d2);
    </script>
</body>

</html>